<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>cube</title>
</head>

<body>
    <script src="../../test/e2e/js/AssetTool.js"></script>
    <script src="../../test/e2e/js/BasicBoxesTool.js"></script>
    <script src="../../test/e2e/js/LightBoxesTool.js"></script>
    <script src="../../test/e2e/js/PositionTool.js"></script>
    <script src="../../test/e2e/js/LightTool.js"></script>
    <script src="../../test/e2e/js/CameraTool.js"></script>
    <script src="../../test/e2e/js/LightMaterialTool.js"></script>
    <script src="../../dist/wd.js"></script>


    <canvas id="ui-canvas" style="
    position:absolute;
    left:0;
    top:0;
    z-index:100;
    "></canvas>

    <button id="begin_draw_line" style="width:100px;height:100px;
    position:absolute;
    left:0px;
    top:0px;
    z-index:101;
    ">开始实线</button>


    <select id="line_type" style="width:100px;height:100px;
    position:absolute;
    left:0px;
    top:200px;
    z-index:101;
    ">
        <option value="solid">实线</option>
        <option value="dash">虚线</option>
    </select>

    <!-- <button id="begin_draw_dash_line" style="width:100px;height:100px;
    position:absolute;
    left:0px;
    top:200px;
    z-index:101;
    ">开始虚线</button> -->


    <button id="end_draw_line" style="width:100px;height:100px;
    position:absolute;
    left:200px;
    top:0px;
    z-index:101;
    ">结束画线</button>


    <button id="clear_draw_line" style="
    width:100px;height:100px;
    position:absolute;
    left:400px;
    top:0px;
    z-index:101;
    ">清空</button>



    <input type="range" id="line_alpha" name="line_alpha" value="1" min="0" max="1" step="0.05" style="
    position:absolute;
    left:600px;
    top:0px;
    z-index:101;
    ">



    <script>
        window.onload = function () {
            return AssetTool.loadConfig(["./config/setting.json", "./config/"], null, function () {
                return initSample(wd.unsafeGetState());
            });


            function _getInterctedPoint(event, cameraGameObject, state, box2) {
                var ray = wd.createPerspectiveCameraRayFromEvent(
                    event,
                    cameraGameObject, state
                );

                var checkResult =
                    wd.checkIntersectMesh(
                        ray,
                        wd.unsafeGetGameObjectGeometryComponent(
                            box2, state,

                        ),
                        wd.getTransformLocalToWorldMatrixTypeArray(
                            wd.unsafeGetGameObjectTransformComponent(
                                box2, state
                            ), state
                        ),
                        1,
                        state
                    );

                var point =
                    wd.getIntersectedPointWithMesh(
                        checkResult
                    );

                // console.log(point);

                return point;

            };

            function _getScreenSize() {
                return [window.innerWidth, window.innerHeight];
            };

            function _isPointInScreenValid([pointInScreen, _lineType, _lineAlpha]) {
                return pointInScreen !== undefined;
            }

            function initSample(state) {
                var uiCanvas = document.querySelector("#ui-canvas");

                uiCanvas.width = window.innerWidth;
                uiCanvas.height = window.innerHeight;

                uiCanvas.style.width = "100%";
                uiCanvas.style.height = "100%";


                var uiContext = uiCanvas.getContext("2d");










                var [state, box1] = LightBoxesTool.createBox(state);



                var transform = wd.unsafeGetGameObjectTransformComponent(box1, state);

                var state = wd.setTransformLocalPosition(transform, [0, 0, -30], state);



                var [state, box2] = BasicBoxesTool.createBox(state);




                var transform = wd.unsafeGetGameObjectTransformComponent(box2, state);

                var state = wd.setTransformLocalPosition(transform, [0, 0, 0], state);







                var [state, box3] = LightBoxesTool.createBox(state);



                var transform = wd.unsafeGetGameObjectTransformComponent(box3, state);

                var state = wd.setTransformLocalScale(transform, [0.2, 0.2, 0.2], state);














                var state = wd.setAmbientLightColor([0.2, 0.2, 0.2], state);


                var [state, directionLightGameObject] = LightTool.createDirectionLight(state);

                var transform = wd.unsafeGetGameObjectTransformComponent(directionLightGameObject, state);

                var state = wd.setTransformLocalEulerAngles(transform, [0, 180, 0], state);




                var [state, cameraGameObject] = LightBoxesTool.createCamera(state);



                var [state, cameraController] = wd.createArcballCameraController(state);

                var state =
                    wd.setArcballCameraControllerMinDistance(cameraController, 0.001, state);
                var state =
                    wd.setArcballCameraControllerDistance(cameraController, 0.001, state);



                var state =
                    wd.setArcballCameraControllerWheelSpeed(cameraController, 1, state);

                var state = wd.addGameObjectArcballCameraControllerComponent(cameraGameObject, cameraController, state);


                var state =
                    wd.bindArcballCameraControllerEvent(
                        cameraController, state
                    );






                var isDrawing = false;

                var needRestoreDrawForLineAlpha = false;

                var SOLID = 0;
                var DASH = 1;

                var lineType = SOLID;

                var lineAlpha = 1;


                var totalDrawPointArr = [];

                var oneDragDrawPointArr = [];


                document.querySelector("#begin_draw_line").addEventListener("mousedown", function () {
                    var state = wd.unsafeGetState();

                    var state =
                        wd.unbindArcballCameraControllerEvent(
                            cameraController, state
                        );

                    wd.setState(state);
                }, true);



                document.querySelector("#begin_draw_line").addEventListener("click", function () {
                    var state = wd.unsafeGetState();

                    var state =
                        wd.unbindArcballCameraControllerEvent(
                            cameraController, state
                        );

                    wd.setState(state);


                    isDrawing = true;

                }, true);










                document.querySelector("#end_draw_line").addEventListener("click", function () {
                    var state = wd.unsafeGetState();


                    var state =
                        wd.bindArcballCameraControllerEvent(
                            cameraController, state
                        );

                    wd.setState(state);


                    isDrawing = false;
                }, true)






                document.querySelector("#clear_draw_line").addEventListener("mousedown", function () {
                    // isDrawing = false;
                    oneDragDrawPointArr = [];
                    totalDrawPointArr = [];
                }, true)






                document.querySelector("#line_type").addEventListener("mousedown", function () {
                    var state = wd.unsafeGetState();

                    var state =
                        wd.unbindArcballCameraControllerEvent(
                            cameraController, state
                        );

                    wd.setState(state);
                }, true);



                document.querySelector("#line_type").addEventListener("blur", function () {
                    if (isDrawing) {
                        return
                    };

                    var state = wd.unsafeGetState();


                    var state =
                        wd.bindArcballCameraControllerEvent(
                            cameraController, state
                        );

                    wd.setState(state);
                }, true);




                document.querySelector("#line_alpha").addEventListener("mousedown", function () {
                    if (isDrawing) {
                        isDrawing = false;

                        needRestoreDrawForLineAlpha = true;

                        return;
                    }

                    needRestoreDrawForLineAlpha = false;


                    var state = wd.unsafeGetState();

                    var state =
                        wd.unbindArcballCameraControllerEvent(
                            cameraController, state
                        );

                    wd.setState(state);
                }, true);

                document.querySelector("#line_alpha").addEventListener("mouseup", function () {
                    if (needRestoreDrawForLineAlpha) {
                        isDrawing = true;

                        needRestoreDrawForLineAlpha = false;

                        return;
                    }


                    var state = wd.unsafeGetState();

                    var state =
                        wd.bindArcballCameraControllerEvent(
                            cameraController, state
                        );

                    wd.setState(state);
                }, true);



                var state =
                    wd.onCustomGlobalEvent(
                        wd.getPointDragStartEventName(),
                        0,
                        (event, state) => {
                            if (!isDrawing) {
                                return [state, event];
                            }

                            var lineTypeSelectDom = document.querySelector("#line_type");
                            switch (lineTypeSelectDom.options[lineTypeSelectDom.selectedIndex].value) {
                                case "solid":
                                    lineType = SOLID;
                                    break;

                                case "dash":
                                    lineType = DASH;
                                    break
                            };

                            lineAlpha = Number(document.querySelector("#line_alpha").value);


                            oneDragDrawPointArr = [];
                            totalDrawPointArr.push(
                                oneDragDrawPointArr
                            );

                            return [state, event];

                        }, state
                    );


                var state =
                    wd.onCustomGlobalEvent(
                        wd.getPointDragOverEventName(),
                        0,
                        (event, state) => {
                            if (!isDrawing) {
                                return [state, event];
                            }


                            oneDragDrawPointArr.push(
                                [
                                    _getInterctedPoint(event, cameraGameObject, state, box2),
                                    lineType,
                                    lineAlpha,
                                ]
                            );

                            return [state, event];

                        }, state
                    );


                var state = wd.registerNoWorkerLoopJob("update_ui", (_, state) => {
                    uiContext.clearRect(0, 0, uiCanvas.width, uiCanvas.height);

                    uiContext.lineWidth = 1;

                    // console.log("color: ", "rgba(255,0,255," + String(lineAlpha) + ")");


                    let pointInScreenDataArrArr =
                        totalDrawPointArr.map((oneDragDrawPointArr) => {
                            return oneDragDrawPointArr.map(([pointInWorld, lineType, lineAlpha]) => {
                                var [screenWidth, screenHeight] = _getScreenSize();

                                return [
                                    wd.convertWorldToScreen(
                                        wd.unsafeGetGameObjectBasicCameraViewComponent(
                                            cameraGameObject, state
                                        ),
                                        wd.unsafeGetGameObjectPerspectiveCameraProjectionComponent(
                                            cameraGameObject, state
                                        ),
                                        [
                                            pointInWorld[0],
                                            pointInWorld[1],
                                            pointInWorld[2],
                                            screenWidth, screenHeight
                                        ],
                                        state
                                    ),
                                    lineType,
                                    lineAlpha
                                ];
                            }).filter(_isPointInScreenValid)
                        });



                    pointInScreenDataArrArr.filter((pointInScreenDataArr) => {
                        return pointInScreenDataArr.length > 0;
                    }).forEach((pointInScreenDataArr) => {
                        uiContext.beginPath();

                        var firstPointInScreen = pointInScreenDataArrArr[0][0];

                        var _ =
                            pointInScreenDataArr.slice(1).reduce((lastPointInScreen,
                                [pointInScreen, lineType, lineAlpha]
                            ) => {

                                uiContext.strokeStyle = "rgba(255,0,255," + String(lineAlpha) + ")";


                                if (lineType === DASH) {
                                    uiContext.setLineDash([5, 20]);
                                }
                                else {
                                    uiContext.setLineDash([]);
                                }

                                uiContext.moveTo(lastPointInScreen[0], lastPointInScreen[1]);

                                uiContext.lineTo(pointInScreen[0], pointInScreen[1]);

                                return pointInScreen;
                            }, firstPointInScreen);


                        uiContext.stroke();
                    })





                    // pointInScreenArr
                    //                     .forEach((pointInScreen) => {


                    //                         uiContext.fillStyle = "#0000ff";
                    //                         uiContext.fillRect(pointInScreen[0], pointInScreen[1], 50, 30);
                    //                     })




                    return state;
                }, state);








                wd.startDirector(state);
            }
        };
    </script>
</body>

</html>